<template>  
    <div style="padding: 10px; width: 100%">  
      <!-- 触发按钮 -->  
      <button @click="showModal = true">查看图表</button>  
    
      <!-- 模态框，使用v-if控制显示隐藏 -->  
      <div v-if="showModal" class="modal" @click="showModal = false" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center;">  
        <!-- 点击此处不关闭模态框 -->  
        <div class="modal-content" @click.stop>  
          <ChartComponent :chartId="2" :sceneId="1" :yName="'kV'" :xName="'time'" :startDate="'2024-07-31'" :endDate="'2024-07-31'" />  
          <!-- 可以在这里添加关闭按钮 -->  
          <button @click="showModal = false">关闭</button>  
        </div>  
      </div>  
    </div>  
  </template>  
    
  <script>  
  // 引入图表组件  
  import ChartComponent from '../components/ChartComponent.vue';  
    
  export default {  
    name: 'ChartPage',  
    components: {  
      ChartComponent  
    },       data() {  
      return {  
        showModal: false // 控制模态框的显示隐藏  
      };  
    }  
  };  
  </script>  
    
  <style scoped>  
  .modal-content {  
    background: white;  
    padding: 20px;  
    border-radius: 8px;  
    position: relative; /* 为了防止点击关闭按钮时触发外层div的点击事件 */  
  }  
  </style>